import Link from "./kroute-link.js"
import View from "./kroute-view.js"
let Vue;
//实现一个插件，挂载到$route
class KVueRoot {
    constructor(options) {
        this.$options = options
        console.log(this.$options);
        // 需要创建响应式的current属性
        // 利用Vue提供的defineReactive做响应化
        // 这样将来current变化的时候，依赖的组件会重新render
       Vue.util.defineReactive(this, 'current','/')
       // Vue.set(this,'current','') 不行 
       window.addEventListener("hashchange",this.onHashChange.bind(this))
       window.addEventListener("load",this.onHashChange.bind(this))
       //创建一个路由映射表，它是path和路由配置之间的一个映射
       this.routeMap={};
       options.routes.forEach(route=>{
           this.routeMap[route.path]=route;
       })

    }
    onHashChange(){
        this.current = window.location.hash.slice(1)
    }
}
KVueRoot.install=function(_vue){
    //保存构造函数在KVueRoot里使用
    Vue = _vue;
    //拦截router
    //怎么获取根实例中的router
    Vue.mixin({
        beforeCreate() {
          // 确保根实例的时候才执行
          if (this.$options.router) {
            Vue.prototype.$router = this.$options.router
          }
        }
      })
      //任务2：实现两个全局组件router-link和router-view
      Vue.component('router-link',Link)
      Vue.component('router-view',View)
}
export default KVueRoot;